<template>
  <el-card shadow="never"
           body-style="padding: 22px;">
    <div class="ele-page-header"
         style="margin-bottom: 20px">
      <div class="ele-page-title">通知模版</div>
      <div class="ele-page-desc"> 用于前端平台相关信息配置。 </div>
    </div>
    <div class="selectTime flex-align-center">
      <div class="orderStatus">类型切换:</div>
      <ul class="timeTab"
          v-for="(item, index) in orderStatusArr"
          :key="index">
        <li :class="[currentIndex == index ? 'active' : '']"
            @click="switchTimeTab(index,item.id)">{{ item.value }}</li>
      </ul>
    </div>
    <!-- <div class="note">
		<el-alert title="注意:"
				  style="height: 100px"
				  show-icon
				  class="ele-alert-border"
				  type="warning"
				  :closable="false">
		  <template #default>
			<div style="font-size: 14px">
			  <div style="margin-bottom: 8px">
				请将微信公众平台服务类目选择为：<span style="font-weight: 700">百货/超市/便利店</span>
				未选类目将会导致模版消息不可用。<br />
			  </div>
			  <div>
				您的微信公众平台目前服务类目为：<span style="font-weight: 700">百货/超市/便利店</span>
			  </div>
			</div>
		  </template>
		</el-alert>
	  </div> -->

    <el-form :inline="true"
             class="demo-form-inline">

      <el-row :gutter="15"
              v-for="(item,index) in notificationTemplateList"
              :key="index">
        <el-col v-bind="styleResponsive ? { md: 24 } : { span: 24 }">
          <table style="margin-bottom: 30px"
                 class="ele-table ele-table-border ele-table-medium">
            <colgroup>
              <col width="360" />
              <col />
            </colgroup>
            <thead>
              <tr>
                <th style="text-align: center">{{ item.name }}
                  <span style="color: #1890ff; cursor: pointer"></span>
                </th>
                <th style="text-align: center">模板信息 类目:{{ item.reamk }}
                  <el-switch :active-value="1"
                             :inactive-value="0"
                             v-model="item.status"
                             @change="editStatus(item)" />
                </th>
              </tr>
            </thead>

            <tr style="height: 80px">
              <td style="text-align: center">模版ID</td>
              <td style="text-align: right">
                <el-form-item :label="item.name + 'ID'">

                  {{ item.type==2?item.template_name?'签名名称 :'+item.template_name:'签名名称 : 空':item.template_name }}{{ item.type == 1 ? '模版code: ' + (item.tid ? item.tid : '空') : item.tid?' 模版code:'+item.tid:'模版code: 空' }} <span style="color: #1890ff; cursor: pointer"
                        @click="editNotificationTemplate(item)">编辑</span>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>

    </el-form>
    <el-dialog title="编辑tid"
               :visible.sync="dialogVisible">
      <el-form :model="form">
        <el-form-item label="修改的tid">
          <el-input v-model.trim="idValue"
                    autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitId()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑模版短信"
               :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="模版code">
          <el-input v-model="form.tid"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 20px;"
                      label="签名名称">
          <el-input v-model="form.template_name"
                    autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 图片预览 -->
    <el-image-viewer v-if="showViewer"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="imgViewArr" />
  </el-card>
</template>
  
  <script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { messageList, messageEdit, messageStatus } from '@/api/config/index'
export default {
  components: { ElImageViewer },
  data () {
    return {
      dialogFormVisible: false,
      currentIndex: 0,
      showViewer: false,
      dialogVisible: false,
      notificationTemplateList: [],
      idValue: '',
      orderStatusArr: [
        {
          value: '模版通知',
          id: 1
        },

        {
          value: '短信通知',
          id: 2
        },
      ],
      form: {
        template_name: '',
        tid: ''
      },
      id: ''
    }
  },
  mounted () {
    this.init();
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {

    switchTimeTab (index) {
      console.log(index)
      this.currentIndex = index;
      this.init(index + 1)

    },
    async init (type) {
      const res = await messageList({
        type: type,
        page: 1,
        limit: 100
      })
      console.log(res)
      if (res.code == 0) {
        this.notificationTemplateList = res.data
      }
    },
    editStatus (row) {

      console.log(row)
      const loading = this.$loading({ lock: true });
      messageStatus({
        id: row.id,
        status: row.status,

      })
        .then((msg) => {
          console.log(msg)
          loading.close();
          this.currentIndex = Number(row.type) - 1
          this.$message.success(msg.message);

          this.init(row.type)

        })
        .catch((e) => {
          loading.close();
          row.status = !row.status ? 1 : 2;
          this.$message.error(e.message);
        });

    },
    async submit () {
      this.dialogFormVisible = false
      const res = await messageEdit({
        ...this.form,
        id: this.id
      })
      console.log(res)
      if (res.code == 0) {
        this.init(2)
        this.$message({
          type: 'success',
          message: res.message
        });
      } else {
        this.$message({
          type: 'error',
          message: '接口报错'
        });
      }
    },
    async submitId () {
      this.dialogVisible = false
      const res = await messageEdit({
        tid: this.idValue,
        id: this.id
      })
      console.log(res)
      if (res.code == 0) {
        this.init(1)
        this.$message({
          type: 'success',
          message: res.message
        });
      } else {
        this.$message({
          type: 'error',
          message: '接口报错'
        });
      }
    },
    editNotificationTemplate (item) {


      console.log(item)
      this.id = item.id
      if (item.type == 1) {

        this.dialogVisible = true
        this.idValue = item.tid

      } else {
        this.dialogFormVisible = true
        this.$util.assignObject(this.form, {
          ...item
        });

      }


    }
  }
}
  </script>
  
  <style lang="less" scoped>
.selectTime {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .timeTab {
    display: flex;
    align-items: center;
    margin-right: 20px;
    li {
      list-style-type: none;
      display: block;
      width: 110px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border: 1px solid #d9d9d9;
      border-radius: 10px;
    }
    .active {
      width: 110px;
      height: 38px;
      border-radius: 6px;
      background: #1890ff;
      color: #fff;
      text-align: center;
      line-height: 38px;
    }
  }
  .orderStatus {
    min-width: 77px;
    height: 34px;
    font-size: 14px;
    line-height: 34px;
  }
  .filterDate {
    text-align: center;
    line-height: 34px;
    width: 90px;
    height: 34px;
    font-size: 14px;
    border-radius: 2px 0px 0px 2px;
    border: 1px solid #d9d9d9;
    border-right: none;
  }
  .ele-fluid {
    width: 300px !important;
  }
}

/deep/.ele-bottom-tool-actions {
  text-align: center;
}
.note {
  margin-bottom: 20px;
}
/deep/ .el-input--medium {
  width: 600px;
}
/deep/ .el-select {
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
/* 表格行拖拽按下去样式 */
.ele-table tr.sortable-chosen {
  background: hsla(0, 0%, 60%, 0.1);
}
</style>
  